<template>
  <div class="register-account">
    <!--注册账号-->
    <div class="register-title">{{$t('message.setAccount')}}</div>
    <div class="input-wrap">
      <!--浏览器自动填充-->
      <input type="text" id="autoUsername"class="input-auto" />
      <input type="password" id="autoPassword" class="input-auto" />
      <!--用户名-->
      <div class="register-content-label">
        <label for="username">{{ $t('message.name') }}:</label>
      </div>
      <!--3-15个字母或数字，特殊字符除外-->
      <div class="register-content-input input-help" :class="{ 'input-loading': usernameStatus === 2, 'input-success': usernameStatus === 1, 'error-input': usernameErrorText }">
        <input type="text" v-model="usernameModel" autocomplete="off" autofocus="autofocus"
          spellcheck="false" :placeholder="$t('message.nameHolder')" :class="{ 'input-error': usernameStatus > 2 }"/>
      </div>
      <!--用户名错误信息-->
      <div class="error-tips" v-if="usernameErrorText">
        {{ usernameErrorText }}
      </div>
      <!--手机号码-->
      <div class="register-content-label">
        <label for="phoneNumber">{{$tc('message.phone')}}:</label>
      </div>
      <!--手机号码输入框-->
      <div class="phone-container input-help" :class="{ 'input-loading': phoneNumberStatus === 2, 'input-success': phoneNumberStatus === 1, 'error-input': phoneNumberErrorText }">
      	<div class="register-content-phone">
          <div class="register-area-code" @click.stop="toggleAreaCode">
           + {{ checkAreaCode }}
          </div>
          <ul class="register-area-list" v-if="isAreaCodeShow">
            <li v-for="(item,index) in areaCodeList" @click="selectCode(index)">+ {{item}}</li>
                v-on:click="selectCode(index)"
                :key="index">+ {{item}}</li>
          </ul>
        </div>
        <!--输入手机号码-->
        <div class="register-content-phone-input">
          <input type="text" id="phoneNumber" v-model.trim="phoneNumberModel" autocomplete="off"
            :placeholder="$t('message.phoneHolder')" :class="{ 'input-error': phoneNumberStatus > 2 }"/>
        </div>
      </div>
      <!--手机号码错误信息-->
      <div class="error-tips" v-if="phoneNumberErrorText">
        {{ phoneNumberErrorText }}
      </div>
      <!--发送手机短信验证码-->
      <div class="register-verification-send">
        <div class="register-verification-input">
          <input type="text" v-model.trim="verificationCodeModel" @keyup.enter="checkVerificationCode()" :class="{ 'input-error': verificationCodeErrorText }" :placeholder="$t('message.sendCodeHolder')"/>
        </div>
        <div class="register-verification-btn">
          <v-code-button :status="btnStatus" @click-button="getVerificationCode()"></v-code-button>
        </div>
      </div>
      <!--错误信息-->
      <div class="register-verification-error" v-if="verificationCodeErrorText">
        {{ verificationCodeErrorText }}
      </div>
      <!--电子邮箱-->
      <div class="register-content-label">
        <label for="email">{{$t('message.email')}}:</label>
      </div>
      <!--请输入邮箱地址-->
      <div class="register-content-input input-help" :class="{ 'input-loading': emailStatus === 2, 'input-success': emailStatus === 1, 'error-input': emailErrorText }">
        <input type="text" id="email" v-model.trim="emailModel" spellcheck="false"
          autocomplete="off"
          :placeholder="$t('message.emailHolder')"
          :class="{ 'input-error': emailStatus > 2 }"/>
      </div>
      <!--电子邮箱错误信息-->
      <div class="error-tips" v-if="emailErrorText">
        {{ emailErrorText }}
      </div>
      <!--Facebook-->
      <div class="register-content-label">
        <label for="facebook">Facebook:</label>
      </div>
      <!--Facebook输入框-->
      <div class="register-content-input">
        <input type="password" style="display: none;" />
        <input type="text" id="facebook" v-model.trim="facebook" :placeholder="$t('message.facebookPlaceholder')" autocomplete="off" />
      </div>
      <!--Instagram-->
      <div class="register-content-label">
        <label for="instagram">Instagram:</label>
      </div>
      <!--Instagram输入框-->
      <div class="register-content-input">
        <input type="text" id="instagram" v-model.trim="instagram" :placeholder="$t('message.instagramPlaceholder')" autocomplete="off" />
      </div>
      <!--密码-->
      <div class="register-content-label">
        <label for="password">{{ $t('message.password') }}:</label>
      </div>
      <!--6-16个字母和数字的组合，特殊字符除外-->
      <div class="register-content-input" :class="{ 'error-input': passwordErrorText }">
        <input type="password" v-model.lazy="passwordModel" autocomplete="off"
               @keyup.enter="checkPassword()" :placeholder="$t('message.passwordHolder')" :class="{ 'input-error': passwordErrorText }"/>
      </div>
      <div class="error-tips" v-if="passwordErrorText">
        {{ passwordErrorText }}
      </div>
      <!--确认密码-->
      <div class="register-content-label">
        <label for="repassword">{{$t('message.repassword')}}:</label>
      </div>
      <!--再次确认密码-->
      <div class="register-content-input" :class="{ 'error-input': repasswordErrorText }">
        <input type="password" v-model.lazy="repasswordModel"
               @keyup.enter="checkRepassword" :placeholder="$t('message.repasswordHolder')" :class="{ 'input-error': repasswordErrorText }"/>
      </div>
      <div class="error-tips">
        {{ repasswordErrorText }}
      </div>
      <div class="register-content-input register-content-check-read" :class="{ 'error-input': readErrorText }">
        <div class="register-content-checkbox">
          <!--<input type="checkbox" v-model="readModel" name="checkRead"/>-->
          <span @click="consentProtocol" :class="{'choose-checkbox': readModel}"></span>
        </div>
        <div class="register-content-read">
          <!--我已阅读并同意网站的使用条件及隐私声明-->
          <router-link to="/register/protocol" target="_blank" class="condition">
            {{ $t('message.agree') }}
          </router-link>
        </div>
      </div>
      <div class="error-tips">
        {{ readErrorText }}
      </div>
      <div class="register-form-submit">
        <!--下一步-->
        <button type="button" @click="nextStep"><span :class="{ 'btn-loading': isLoading }">{{$t('message.register')}}</span></button>
      </div>
      <div class="register-form-login">
        <!--已有账号?立即登录-->
        <span>{{ $t('message.haveAccount') }}？<a href="/login"> {{$tc('message.login', 2)}}</a></span>
      </div>
    </div>
  </div>
</template>

<script>
import VCodeButton from '@/components/base/VCodeButton'
import VDialog from '@/components/base/VDialog'
import { setCookie, getCookie, delCookie } from '@/util/util'

export default {
  name: 'RegisterAccount',
  components: {
    VCodeButton,
    VDialog
  },
  data () {
    return {
      btnStatus: 0,
      verificationCodeModel: '',
      verificationCodeStatus: 0,
      usernameModel: '',
      usernameStatus: 0,
      phoneNumberModel: '',
      phoneNumberStatus: 0,
      emailModel: '',
      emailStatus: 0,
      facebook: '',
      instagram: '',
      passwordModel: '',
      passwordStatus: 0,
      repasswordModel: '',
      repasswordStatus: 0,
      readModel: false,
      readStatus: 0,
      isAreaCodeShow: false,
      checkAreaCode: '',
      areaCodeList: ['66'],
      isLoading: false
    }
  },
  computed: {
    sendPhoneNumber () {
      return this.checkAreaCode + this.phoneNumberModel
    },
    verificationCodeErrorText () {
      switch (this.verificationCodeStatus) {
        case 0:
          return ''
        case 1:
          return ''
        case 2:
          return this.$t('message.codeNoEmpty')
        case 3:
          return this.$t('message.codeFomatError')
        case 4:
          return this.$t('message.messageSendFail')
        case 5:
          return this.$t('message.messageNotOpen')
        case 6:
          return this.$t('message.phoneNumberError')
        case 7:
          return this.$t('message.messageSendSoMuch')
        case 8:
          return this.$t('message.codeError')
      }
    },
    referrer () {
      return this.$route.query.r || ''
    },
    // 0:表示初始的状态
    // 1:表示成功的状态
    // 2:表示加载的状态
    // 3:表示错误的状态
    // 4:用户名不能为空
    // 5:用户名不得小于3位或大于15位
    // 6:用户名不得包含字母或数字之外的符号
    // 7:该用户名已被注册
    // 8:网络错误，请重新输入
    usernameErrorText () {
      switch (this.usernameStatus) {
        case 0:
          return ''
        case 1:
          return ''
        case 2:
          return ''
        case 3:
          return ''
        case 4:
          return this.$t('message.nameError')
        case 5:
          return this.$t('message.registerError1')
        case 6:
          return this.$t('message.registerError2')
        case 7:
          return this.$t('message.registerError3')
        case 8:
          return this.$t('message.errorMessage')
      }
    },
    // 0:表示初始的状态
    // 1:表示成功的状态
    // 2:表示加载的状态
    // 3:表示错误的状态
    // 4:输入内容不能为空
    // 5:手机号码格式错误
    // 6:该手机号码已经注册
    // 7:网络错误，请重新输入
    phoneNumberErrorText () {
      switch (this.phoneNumberStatus) {
        case 0:
          return ''
        case 1:
          return ''
        case 2:
          return ''
        case 3:
          return ''
        case 4:
          return this.$t('message.inputError')
        case 5:
          return this.$t('message.registerError4')
        case 6:
          return this.$t('message.registerError5')
        case 7:
          return this.$t('message.errorMessage')
      }
    },
    // 0:表示初始的状态
    // 1:表示成功的状态
    // 2:表示加载的状态
    // 3:表示错误的状态
    // 4:输入内容不能为空
    // 5:邮箱号码格式错误
    // 6:该邮箱已经注册
    // 7:网络错误，请重新输入
    emailErrorText () {
      switch (this.emailStatus) {
        case 0:
          return ''
        case 1:
          return ''
        case 2:
          return ''
        case 3:
          return ''
        case 4:
          return this.$t('message.inputError')
        case 5:
          return this.$t('message.registerError6')
        case 6:
          return this.$t('message.registerError7')
        case 7:
          return this.$t('message.errorMessage')
      }
    },
    // 2:密码不能为空
    // 3:密码长度不得小于6位或不得大于16位
    // 4:密码必须包含字母和数字，不包含特殊符号
    passwordErrorText () {
      switch (this.passwordStatus) {
        case 0:
          return ''
        case 1:
          return ''
        case 2:
          return this.$t('message.passwordError')
        case 3:
          return this.$t('message.registerError8')
        case 4:
          return this.$t('message.registerError9')
      }
    },
    // 2:密码不能为空
    // 3:密码长度不得小于6位或不得大于16位
    // 4:密码必须包含字母和数字，不包含特殊符号
    // 5:确认密码与密码输入不一致
    repasswordErrorText () {
      switch (this.repasswordStatus) {
        case 0:
          return ''
        case 1:
          return ''
        case 2:
          return this.$t('message.passwordError')
        case 3:
          return this.$t('message.registerError8')
        case 4:
          return this.$t('message.registerError9')
        case 5:
          return this.$t('message.registerError10')
      }
    },
    // 请勾选"我已阅读并同意网站的使用条件及隐私声明
    readErrorText () {
      switch (this.readStatus) {
        case 0:
          return ''
        case 1:
          return this.$t('message.readError')
      }
    }
  },
  watch: {
    verificationCodeModel () {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.checkVerificationCode()
      }, 1000)
    },
    usernameModel () {
      this.usernameStatus = 0
      // 取消请求
      if (this.usernameSource) {
        this.usernameSource.cancel('cancel')
      }
      // 设置1秒后才判断
      clearTimeout(this.usernameTimer)
      this.usernameTimer = setTimeout(() => {
        this.checkUsername()
      }, 1000)
    },
    phoneNumberModel () {
      this.phoneNumberStatus = 0
      // 取消请求
      if (this.phoneNumberSource) {
        this.phoneNumberSource.cancel('cancel')
      }
      // 设置1秒后才判断
      clearTimeout(this.phoneNumberTimer)
      this.phoneNumberTimer = setTimeout(() => {
        this.checkPhoneNumber()
      }, 1000)
    },
    emailModel () {
      this.emailStatus = 0
      // 取消请求
      if (this.emailSource) {
        this.emailSource.cancel('cancel')
      }
      // 设置1秒后才判断
      clearTimeout(this.emailTimer)
      this.emailTimer = setTimeout(() => {
        this.checkEmail()
      }, 1000)
    },
    passwordModel () {
      this.checkPassword()
      if (this.repasswordModel) {
        if (this.passwordModel !== this.repasswordModel) {
          this.repasswordStatus = 5
        } else {
          this.repasswordStatus = 1
        }
      }
    },
    repasswordModel () {
      this.checkRepassword()
    },
    readModel (val) {
      if (val) {
        this.readStatus = 0
      }
    }
  },
  methods: {
    toggleAreaCode () {
      this.isAreaCodeShow = !this.isAreaCodeShow
    },
    selectCode (index) {
      this.isAreaCodeShow = false
      this.checkAreaCode = this.areaCodeList[index]
    },
    getVerificationCode () {
      if (this.phoneNumberStatus !== 1) {
        return
      }
      this.btnStatus = 1
      this.$ajax.sendInfoCheck(this.sendPhoneNumber).then((res) => {
        if (res.code === 200 || res.code === 311) {
          this.btnStatus = 2
          if (res.code === 200) {
            this.verificationCodeStatus = 0
          } else {
            this.verificationCodeStatus = 7
          }
        } else if (res.code === 202) {
          this.verificationCodeStatus = 4
          this.btnStatus = 0
        } else if (res.code === 301) {
          this.verificationCodeStatus = 5
          this.btnStatus = 0
        } else if (res.code === 303 || res.code === 305) {
          this.verificationCodeStatus = 6
          this.btnStatus = 0
        } else {
          this.btnStatus = 0
          this.$store.commit('alert', {
            switch: true
          })
        }
      }).catch((err) => {
        this.verificationCodeStatus = 4
        this.btnStatus = 0
      })
    },
    checkVerificationCode () {
      let code = this.verificationCodeModel
      if (code === '') {
        this.verificationCodeStatus = 0
      } else if (code.length !== 6) {
        this.verificationCodeStatus = 3
      } else {
        this.verificationCodeStatus = 1
      }
    },
    consentProtocol () {
      if (this.readModel) {
        this.readModel = false
      } else {
        this.readModel = true
      }
    },
    // 检查用户名是否合法
    checkUsername () {
      let username = this.usernameModel
      if (username === '') {
        this.usernameStatus = 4
        return
      } else if (!/^.{3,15}$/.test(username)) {
        this.usernameStatus = 5
        return
      } else if (!/^[a-zA-Z0-9]{3,15}$/.test(username)) {
        this.usernameStatus = 6
        return
      }
      let ajax = this.$ajax.duplicateChecking({type: 'user_name', text: username})
      this.usernameSource = ajax.source
      this.usernameStatus = 2
      ajax.post.then((res) => {
        if (res.code === 200) {
          this.usernameStatus = 1
        } else if (res.code === 202) {
          this.usernameStatus = 7
        } else {
          this.usernameStatus = 3
        }
      }).catch((err) => {
        if (err.message !== 'cancel') {
          this.usernameStatus = 8
        }
      })
    },
    // 检查手机号码是否合法
    checkPhoneNumber () {
      let phoneNumber = this.phoneNumberModel
      if (phoneNumber === '') {
        this.phoneNumberStatus = 4
      } else if (!/^[0][689]\d{8}$/.test(phoneNumber)) {
        this.phoneNumberStatus = 5
      } else {
        let ajax = this.$ajax.duplicateChecking({type: 'mobile', text: phoneNumber})
        this.phoneNumberSource = ajax.source
        this.phoneNumberStatus = 2
        ajax.post.then((res) => {
          if (res.code === 200) {
            this.phoneNumberStatus = 1
          } else if (res.code === 202) {
            this.phoneNumberStatus = 6
          } else if (res.code === 303) {
            this.phoneNumberStatus = 5
          } else {
            this.phoneNumberStatus = 3
          }
        }).catch((err) => {
          if (err.message !== 'cancel') {
            this.phoneNumberStatus = 7
          }
        })
      }
    },
    // 检查电子邮箱是否合法
    checkEmail () {
      let email = this.emailModel
      if (email === '') {
        this.emailStatus = 4
      } else if (!/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(email)) {
        this.emailStatus = 5
      } else {
        let ajax = this.$ajax.duplicateChecking({type: 'email', text: email})
        this.emailSource = ajax.source
        this.emailStatus = 2
        ajax.post.then((res) => {
          if (res.code === 200) {
            this.emailStatus = 1
          } else if (res.code === 202) {
            this.emailStatus = 6
          } else if (res.code === 303) {
            this.emailStatus = 5
          } else {
            this.emailStatus = 3
          }
        }).catch((err) => {
          if (err.message !== 'cancel') {
            this.emailStatus = 7
          }
        })
      }
    },
    // 检查密码是否合法
    checkPassword () {
      let password = this.passwordModel
      this.passwordStatus = 0
      if (password === '') {
        this.passwordStatus = 2
      } else if (!/^.{6,16}$/.test(password)) {
        this.passwordStatus = 3
      } else if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(password)) {
        this.passwordStatus = 4
      } else {
        this.passwordStatus = 1
      }
    },
    // 检查确认密码是否合法
    checkRepassword () {
      let repassword = this.repasswordModel
      this.repasswordStatus = 0
      if (repassword === '') {
        this.repasswordStatus = 2
      } else if (!/^.{6,16}$/.test(repassword)) {
        this.repasswordStatus = 3
      } else if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(repassword)) {
        this.repasswordStatus = 4
      } else if (repassword !== this.passwordModel) {
        this.repasswordStatus = 5
      } else {
        this.repasswordStatus = 1
      }
    },
    // 点击下一步
    nextStep () {
      if (this.usernameModel === '') {
        this.usernameStatus = 4
      }
      if (this.phoneNumberModel === '') {
        this.phoneNumberStatus = 4
      }
      if (this.emailModel === '') {
        this.emailStatus = 4
      }
      if (this.passwordModel === '') {
        this.passwordStatus = 2
      }
      if (this.repasswordModel === '') {
        this.repasswordStatus = 2
      }
      if (!this.readModel) {
        this.readStatus = 1
      }
      if (this.verificationCodeModel === '') {
        this.verificationCodeStatus = 2
      }
      if (this.isLoading) {
        return
      }
      if (this.usernameStatus === 1 && this.phoneNumberStatus === 1 && this.emailStatus === 1 && this.passwordStatus === 1 && this.repasswordStatus === 1 && this.readModel && this.verificationCodeStatus === 1) {
        // 显示loading
        this.isLoading = true
        //  验证短信验证码是否正确
        this.checkVerificationCodeModel()
      }
    },
    // 验证验证码是否正确
    checkVerificationCodeModel () {
      this.$ajax.ValidateInfo(this.sendPhoneNumber, this.verificationCodeModel).then((res) => {
        if (res.code === 200) {
          this.register()
        } else {
          this.isLoading = false
          this.verificationCodeStatus = 8
        }
      }).catch((err) => {
        this.isLoading = false
        this.$store.commit('alert', {
          switch: true
        })
      })
    },
    // 注册账号
    register () {
      // 写入第一步骤数据,验证码
      let data = {
        user_name: this.usernameModel,
        user_email: this.emailModel,
        facebook: this.facebook,
        instagram: this.instagram,
        user_pwd: this.passwordModel,
        user_mobile: this.sendPhoneNumber,
        sms_code: this.verificationCodeModel,
        r: this.referrer
      }
      // 注册账号
      this.$ajax.register(data).then((res) => {
        // 隐藏loading图标
        this.isLoading = false
        if (res.code === 200) {
          // 判断浏览器cookie功能是否开启
          setCookie('test', 'testCookie')
          let testC = getCookie('test')
          if (testC === null) {
            this.$store.commit('alert', {
              alertText: this.$t('message.cookieIsClosedAndPleaseOpenCookie'),
              switch: true
            })
            return
          } else {
            delCookie('test')
          }
          let obj = {
            getReferrer: this.referrer,
            username: this.usernameModel,
            phoneNumber: this.sendPhoneNumber,
            email: this.emailModel,
            password: this.passwordModel
          }
          // 把数据存储为cookie给后面的步骤用
          let str = JSON.stringify(obj)
          setCookie('thaiPayMall_registerUser', str)
          // 注册完成后登录
          this.login()
          this.$router.push({path: '/register/account/success'})
        } else {
          this.$store.commit('alert', {
            alertText: this.$t('message.registerFail'),
            switch: true
          })
        }
      }).catch((err) => {
        this.isLoading = false
        this.$store.commit('alert', {
          switch: true
        })
      })
    },
    login () {
      this.$ajax.userLogin(this.usernameModel, this.passwordModel).then((res) => {
        if (res.code === 200) {
          setCookie('username', res.data.user_name)
          setCookie('profile', res.data.head_portrait)
          setCookie('unreadMsg', res.data.unread_message_count)
          this.$store.commit('updateLoginUser', {
            username: res.data.user_name,
            profile: res.data.head_portrait,
            unreadMsg: res.data.unread_message_count
          })
        }
      }).catch((err) => {
        this.$store.commit('alert', {
          switch: true
        })
      })
    }
  },
//  created () {
//    let strUser = window.sessionStorage.getItem('thaiPayMall_registerUser')
//    let strUser = getCookie('thaiPayMall_registerUser')
//    if (strUser) {
//      let registerUser = JSON.parse(strUser)
//      this.usernameModel = registerUser.username
//      this.phoneNumberModel = registerUser.phoneNumber
//      this.emailModel = registerUser.email
//      this.passwordModel = registerUser.password
//      this.repasswordModel = registerUser.password
//      this.readModel = true
//    }
//  },
  created () {
    this.checkAreaCode = this.areaCodeList[0]
    document.addEventListener('click', (e) => {
      this.isAreaCodeShow = false
    })
  }
}
</script>

<style scoped>
.register-account {
  padding: 100px 0 40px;
  background-color: #fff;
}

.register-title {
  height: 33px;
  line-height: 33px;
  font-size: 24px;
  color: #333;
  text-align: center;
  padding-bottom: 60.5px;
}

  .register-verification-error {
    line-height: 16px;
    padding-left: 24px;
    color: #FF600A;
    font-size: 14px;
    margin-bottom: 12px;
    margin-Top: -12px;
    background: url(../../assets/images/icon_errorTips.png) no-repeat;
  }
  .register-verification-send {
    width: 376px;
    height: 48px;
    margin-top: 24px;
    margin-bottom: 24px;
  }
  
  .register-verification-input {
    float: left;
    height: 48px;
  }

  .register-verification-input > input {
    width: 214px;
    height: 46px;
    border: 1px solid #D7D7D7;
    border-radius: 2px;
    padding: 0 16px;
  }
  .register-verification-btn {
    float: right;
    width: 110px;
    height: 48px;
  }

.input-wrap {
  width: 376px;
  margin: 0 auto;
}

.register-content-label {
  font-size: 14px;
  color: #333;
  margin-bottom: 12px;
}

.register-content-input {
  width: 100%;
  margin-bottom: 24px;
}

.register-content-input > input {
  width: 376px;
  height: 50px;
  box-sizing: border-box;
  border: 1px solid #D7D7D7;
  padding: 0 16px;
  border-radius: 2px;
}

.input-wrap .error-input {
  margin-bottom: 12px;
}

.error-tips {
  margin-bottom: 12px;
}

.phone-container {
  height: 50px;
  margin-bottom: 24px;
}

.register-content-phone {
  float: left;
  width: 89px;
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  border: 1px solid #D7D7D7;
  border-right: 0;
  cursor: pointer;
  position: relative;
}

.register-area-code {
  padding-left: 15px;
  position: relative;
}

.register-area-code:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 6px solid #333333;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  position: absolute;
  right: 16px;
  top: 50%;
  margin-top: -3px;
}

.register-area-list {
  width: 100%;
  border: 1px solid #D7D7D7;
  background: #fff;
  position: absolute;
  top: 100%;
  left: -1px;
}

.register-area-list li {
  line-height: 30px;
  padding-left: 15px;
  color: #333333;
}

.register-area-list li:hover {
  color: #fff;
  background: #1e90ff;
}

.register-content-phone-input {
  float: left;
  width: 286px;
  height: 50px;
}

.register-content-phone-input > input {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  border: 1px solid #D7D7D7;
  padding: 0 16px;
}

.register-content-check-read {
  height: 20px;
  font-size: 0;
  overflow: hidden;
}

.register-content-checkbox {
  float: left;
  height: 16px;
  margin-top: 2px;
  margin-right: 6px;
}

.register-content-checkbox > span {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #D7D7D7;
  border-radius: 2px;
  cursor: pointer;
}

.choose-checkbox {
  background: url(../../assets/images/icon_checkbox_select.png) no-repeat 0;
  border: none!important;
}

.register-content-read {
  float: left;
  height: 20px;
  line-height: 20px;
  letter-spacing: 1px;
  width: 348px;
}

.register-content-read a {
  color: #676767;
  font-size: 12px;
}

.register-content-read a:hover {
  color: #FF600A;
  text-decoration: underline;
  font-size: 12px;
}

.register-form-submit {
  width: 100%;
  height: 48px;
  margin-bottom: 24px;
}

.register-form-submit > button {
  width: 100%;
  height: 48px;
  background-color: #FF600A;
  border: 0;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  border-radius: 2px;
}

.register-form-submit > button:hover {
  background-color: #ff3c00;
}

.register-form-submit > button:active {
  background-color: #e83700;
}

.register-form-login {
  text-align: center;
}

.register-form-login span {
  font-size: 12px;
  color: #676767;
}

.register-form-login a {
  font-size: 12px;
  color: #FF600A;
}

.register-form-login a:hover {
  text-decoration: underline;
}
</style>
